<!-- 页面  -->
<template>
	<s-layout title="兑换中心">
		<view class="container">
			<view class="header">
				<text class="title">卡密绑定</text>
			</view>
			<view class="form">
				<view class="input-group">
					<text class="label">卡密：</text>
					<input type="text" v-model="cardCode" placeholder="请输入卡密" class="input" maxlength="20" />
				</view>
				<button class="submit-button" style="background-color: #FF7A0C;color: #fff;width: 500rpx;margin-top: 200rpx;" :disabled="!cardCode" @click="bindCard">
					绑定
				</button>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		nextTick,
		reactive,
		ref
	} from 'vue';
	import dayjs from "dayjs";

	const cardCode = ref()
	onLoad((opt) => {
		console.log(opt)
	})
	async function bindCard() {
		if (!cardCode.value) {
			sheep.$helper.error('请输入卡密')
		}
		const res = await sheep.$api.recharge.universalCardRecharge({
			cardNumber: cardCode.value
		});
		if (res.code === 200) {
			sheep.$store('user').getInfo();
			uni.redirectTo({
				url: '/pages/user/wallet/money'
			})
		}
	}
	
</script>

<style lang="scss" scoped>
	.container {
	  padding: 20px;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	}
	.header {
	  margin-bottom: 20px;
	}
	.title {
	  font-size: 24px;
	  font-weight: bold;
	}
	.form {
	  width: 100%;
	  max-width: 400px;
	  display: flex;
	  flex-direction: column;
	}
	.input-group {
	  margin-bottom: 20px;
	  display: flex;
	  flex-direction: column;
	}
	.label {
	  font-size: 16px;
	  margin-bottom: 8px;
	}
	.input {
	  padding: 10px;
	  border: 1px solid #ddd;
	  border-radius: 4px;
	}
	.submit-button {
	  // padding: 12px;
	  background-color: #FF7A0C;
	  color: white;
	  border: none;
	  border-radius: 4px;
	  font-size: 16px;
	  text-align: center;
	}
	.submit-button:disabled {
	  background-color: #ccc;
	}
</style>